<template>
  <div class="tmpl">

		<ul class="mui-table-view mui-grid-view">
<!-- 
			<li class="mui-table-view-cell mui-media mui-col-xs-6">
				<router-link to="/goods/goodsinfo">
					<img class="mui-media-object" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=33275663,2336373929&fm=11&gp=0.jpg">
				</router-link>
				
				<div class="desc">
					<h5>荣耀9我是详情页</h5>
					<div class="box">
						<p>
							<h6><span>$222</span> <s>$333</s></h6>
						</p>

						<p class="sell">	
							<div class="topsell">热卖中</div>
							<div class="count">剩11件</div> 
						</p>
					</div>
				</div>
			</li> -->
			
		<li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in goodslist">
				  <router-link v-bind='{to:"/goods/goodsinfo/"}'>
					<img class="mui-media-object" :src="item.img_url">
					</router-link>
				<div class="desc">
					<h5>{{item.title}}</h5>
					<div class="box">
						<p>
							<h6><span>${{item.sell_price}}</span> <s>${{item.market_price}}</s></h6>
						</p>

						<p class="sell">	
							<div class="topsell">热卖中</div>
							<div class="count">剩{{ item.stock_quantity }}件</div> 
						</p>
					</div>
				</div>
			</li>


<!-- 111111111111111111111111 -->

			<li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in goodslist">
				  <router-link v-bind='{to:"/goods/goodsinfo/"+item.id}'>
					<img class="mui-media-object" :src="item.img_url">
					</router-link>
				<div class="desc">
					<h5>{{item.title}}</h5>
					<div class="box">
						<p>
							<h6><span>${{item.sell_price}}</span> <s>${{item.market_price}}</s></h6>
						</p>

						<p class="sell">	
							<div class="topsell">热卖中</div>
							<div class="count">剩{{ item.stock_quantity }}件</div> 
						</p>
					</div>
				</div>
			</li>


			
		</ul>    



  </div>
</template>

<script>
//引用key
// import common from '../../kits/common.js';

export default {
 		data(){
 			return{
				 goodslist:[//存api返回的message的数据
				 //定死数据
					 {
						id:31,
						title:"荣耀9",
						add_time:"2017-09-10 12:10:10",
						click:11,
						img_url:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=33275663,2336373929&fm=11&gp=0.jpg",
						sell_price:2000,
						market_price:2200,
						stock_quantity:60
				 },
				  {
						id:32,
						title:"前4个是获取id",
						add_time:"2017-09-10 12:10:10",
						click:11,
						img_url:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=33275663,2336373929&fm=11&gp=0.jpg",
						sell_price:2000,
						market_price:2200,
						stock_quantity:60
				 },
				  {
						id:33,
						title:"这里是title",
						add_time:"2017-09-10 12:10:10",
						click:11,
						img_url:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=33275663,2336373929&fm=11&gp=0.jpg",
						sell_price:2000,
						market_price:2200,
						stock_quantity:60
				 },
				  {
						id:34,
						title:"这里是title",
						add_time:"2017-09-10 12:10:10",
						click:11,
						img_url:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=33275663,2336373929&fm=11&gp=0.jpg",
						sell_price:2000,
						market_price:2200,
						stock_quantity:60
				 }
				 ]
 			
			 }
			 
		 }
		//  ps：在这个里面之所以能用调用方法，是因为调用组件的生命周期created（）方法之前已经在vue对象中创建好了data（和methods中的所有成员
		//  ,created(){
		// 		 	this.getgoodslist(1);//默认第一页
		// 	 }
		 
		 ,methods:{
			 		getgoodslist(){
						 let url = common.apihost + 'api/getgoods?pageindex='+pageindex;
						this.$http.get(url).hen(res=>{
								this.goodslist = res.body.message;
						})


					 }

		 }
 		
}
</script>

<style lang="scss" scoped>
.mui-table-view.mui-grid-view .mui-table-view-cell{
	padding: 5px;
}

.mui-table-view li{
	height: 274px;
	border: 1px solid #eee;
	margin: 4px 0 4px 2px;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object{
	height: 164px;
	
}


.desc h5{
	margin: 10px 0;
	text-align: left;
	color: #333;
	font-size: 14px;
}

.box{
	height: 60px;
	background-color:rgba(0,0,0,0.1);
	margin: 0;
	padding: 5px;

}
.box h6{
	text-align: left;
}
.box h6 span{
	color: #f00;
	font-size: 16px;
	margin: 0 35px 0 5px;
}
.sell{
	margin: 10px 0 0 0;
}
.topsell,.count{
	font-size: 12px;
	color: rgba(0,0,0,0.5)
}
.topsell{
	color: #f00;
	float: left;
	width: 40%;
	text-align: left;
}
.count{
	float: right;
	width: 55%;
	text-align: right;
}
</style>
